﻿<%@ Page Title="Promotion Engine - Item Master Data" Language="C#" MasterPageFile="~/Popup.Master"
    AutoEventWireup="true" CodeBehind="ItemList.aspx.cs" Inherits="PromotionEngine.ItemList" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script type="text/javascript">
        var oItem = {};
        var isInsert = false;
        var jsonCompany = {}
        var keySearch;
        var grid;
        function Search() {
            keySearch = $("#KeySearch").val();
            grid.dataSource.read();
        }
        $(document).ready(function () {
            setTimeout(function () { $("#KeySearch").focus(); }, 0);
            $("#KeySearch").keydown(function (event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                    Search();
                    return false;
                }
            });
            grid = $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            type: "GET",
                            url: "ItemList.aspx/GetItems",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        },
                        parameterMap: function (options, operation) {
                            if (operation === "read") {
                                return { keySearch: kendo.stringify(keySearch) };
                            }
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true
                    },
                    type: 'json',
                    pageSize: 20,
                    schema: {
                        data: function (response) {
                            if (response.d != null && response.d != '') {
                                var data = response.d;
                                return JSON.parse(data);
                            }
                        },
                        total: function (response) {
                            if (response.d != '') {
                                return JSON.parse(response.d).length;
                            }
                            else {
                                return 0;
                            }
                        },
                        model: {
                            id: "ItemID",
                            fields: {
                                ItemID: { type: "string", validation: { required: true} },
                                ItemCode: { type: "string", validation: { required: true} },
                                ItemName: { type: "string", validation: { required: true} },
                                CompanyCode: { type: "string", validation: { required: true} },
                                CreatedUserID: { type: "string", validation: { required: true} },
                                CreatedDate: { type: "date", validation: { required: true} },
                                BasePrice: { type: "number", validation: { required: true, min: 0} },
                                AllowPromotion: { type: "boolean" },
                                IsActive: { type: "boolean" }
                            }
                        }
                    }
                },
                change: onChange,
                editable: {
                    mode: "popup"
                },
                filterable: true,
                height: 470,
                selectable: "row",
                sortable: true,
                pageable: true,
                batch: true,
                columns: [{ field: "ItemID", title: "ID", width: 80, hidden: true },
                            { field: "ItemCode", title: "Code", width: 140 },
                            { field: "ItemName", title: "Name" },
                            { field: "BasePrice", title: "Price", width: 200, format: "{0:n}", type: "number", attributes: { style: "text-align:right;"} },
                            { field: "AllowPromotion", title: "AllowPromotion", width: 200 }
                           ]
            }).data("kendoGrid");
        });

        function onChange(arg) {
            var selectedRows = this.select();
            var selectedDataItems = [];
            for (var i = 0; i < selectedRows.length; i++) {
                var dataItem = this.dataItem(selectedRows[i]);
                selectedDataItems.push(dataItem);
            }
            if (selectedDataItems.length > 0) {
                parent.ChooseItem(selectedDataItems[0].ItemID, selectedDataItems[0].ItemCode, selectedDataItems[0].ItemName, selectedDataItems[0].BasePrice);
            }
        }
        
    </script>
    <script type="text/x-kendo-template" id="template">  
        <div class="k-edit-label" style="display:none;">
            <label for="ItemID">
                ID</label></div>
        <div class="k-edit-field" data-container-for="ItemID"  style="display:none;">
            <input name="ItemID" class="k-input k-textbox"  type="text" data-bind="value:ItemID"></div>
        <div class="k-edit-label">
            <label for="ItemCode">
                Code</label></div>
        <div class="k-edit-field" data-container-for="ItemCode">
            <input name="ItemCode" class="k-input k-textbox" required="required" type="text"
                data-bind="value:ItemCode"></div>
        <div class="k-edit-label">
            <label for="ItemName">
                Name</label></div>
        <div class="k-edit-field" data-container-for="ItemName">
            <input name="ItemName" class="k-input k-textbox" required="required" type="text"
                data-bind="value:ItemName"></div>
        <div class="k-edit-label"  style="display:none;">
            <label for="CompanyCode">
                Company</label></div>
        <div data-container-for="CompanyCode" class="k-edit-field"  style="display:none;">
         <input id="ddlCompany" name="CompanyCode" data-bind="value:CompanyCode" validationMessage = "Company is required")>
        </div>
        <div class="k-edit-label">
            <label for="BasePrice">
                Price</label></div>
        <div class="k-edit-field" data-container-for="BasePrice">
            <input type="text" name="BasePrice" style="text-align:right;" required="required" min="0" data-type="number" data-bind="value:BasePrice" data-role="numerictextbox" role="spinbutton" class="k-input" aria-valuemin="0" aria-valuenow="234324345435" aria-disabled="false" aria-readonly="false" style="display: none;">
            </div>
        <div class="k-edit-label">
            <label for="AllowPromotion">
                Allow Promotion</label></div>
        <div class="k-edit-field" data-container-for="AllowPromotion">
            <input name="AllowPromotion" type="checkbox" data-bind="checked:AllowPromotion" data-type="boolean"></div>
        <div class="k-edit-label">
            <label for="IsActive">
                Active</label></div>
        <div class="k-edit-field" data-container-for="IsActive">
            <input name="IsActive" type="checkbox" data-bind="checked:IsActive" data-type="boolean"></div>
    </script>
    <table style="width: 100%;" border="0">
        <tr>
            <td style="width: 85%;">
                <input type="text" class="k-input k-textbox" name="KeySearch" id="KeySearch" style="width: 100%;" />
            </td>
            <td align="right">
                <button type="button" id="btnSave" onclick="Search();" class="k-button k-button-icontext k-primary"
                    style="width: 150px;">
                    <span class="k-icon k-i-search"></span>Find</button>
            </td>
        </tr>
    </table>
    <div style="position: absolute; z-index: 0; margin-right: 8px; margin-top: 10px;">
        <div id="grid">
        </div>
    </div>
</asp:Content>
